// 引入公共样式
require("../../assets/css/css.less");
// 引入css样式
require("./user-details.less");

// 服务器地址
const API = "http://fitness.h5.itsource.cn:3701";

// 获取axios工具函数
const request = require("../../utils/request");

// 加载
// window.onload = () => {
//         // 获取标签
//         const headP=document.querySelector('.headP');
//         const username=document.querySelector('.username');

//     // 获取用户信息
//     function getUserInfo(){
//         request.get('/api/user/info').then(res=>{
//             // console.log('res.data',res.data);
//             // 1.解构数据
//             let {errno, data}=res.data;
//             // 2.判断
//             if(errno===0){

//                 // 3.处理业务逻辑
//                 render(data)
//             }
//         })
//     }

//     // 渲染函数 渲染dom 更新dom
//     function render(data){
//         // 图片渲染
//         headP.src=API+data.imgUrl;
//         username.textContent=data.nickName;

//     }

//     // 初始化调用一次
//     getUserInfo()
// }

window.onload = () => {
    // 获取dom
    const upload = document.querySelector("#upload");
    const nickName = document.querySelector("#nickName");
    const showCityPicker = document.querySelector('#showCityPicker');
    const selCity = document.querySelector('#selCity');
    const showProvincePicker = document.querySelector('#showProvincePicker');
    let selProvince = document.querySelector('#selProvince');
    const showDatePicker = document.querySelector('#showDatePicker');
    let selBirthday = document.querySelector('#selBirthday');
    const showSexPicker = document.querySelector('#showSexPicker');
    let selSex = document.querySelector('#selSex');
    const avatar = document.querySelector('#avatar');
    const text = document.querySelector('#text');
    const submit = document.querySelector('#submit');
    let cityId='';
    let provinceId1='';



    // 获取用户信息
    function getUserInfo() {
        request.get("/api/user/info").then((res) => {
            // 1.解构数据
            let { errno, data } = res.data;
            // 2.判断
            if (errno === 0) {
                // 3.处理业务逻辑
                render(data);
            }
        });
    }

    // 渲染函数 渲染dom 更新dom
    function render(data) {
        // 图片渲染
        avatar.src = API + data.imgUrl;
        // 昵称渲染
        nickName.value = data.nickName;
        // 性别渲染
        selSex.textContent = data.gender ?? '请选择性别';
        // 生日渲染
        selBirthday.textContent = data.birthday ?? '请选择生日'
        // 简介渲染
        text.value = data.sign;
    }

    // 初始化调用一次
    getUserInfo();

    //   监听file 输入框的change事件
    upload.addEventListener('change', e => {
        console.log('e:', e);
        // 创建formData 对象 添加文件
        const formData = new FormData();
        formData.append('file', e.target.files[0]);
        // 发送ajax请求
        request.post('/api/circles/uploadImg', formData).then(res => {
            console.log('res.data:', res.data);
            // 解构数据
            let { errno, data } = res.data;
            // 判断
            if (errno === 0) {
                // 数据渲染
                avatar.src = API + data.url;
            }
        })
    })

    // 获取头像标签

    // 建立事件
    avatar.addEventListener('click', function () {
        // 让上传按钮触发点击事件
        upload.click();
    })



    // 获取性别标签

    // 监听
    showSexPicker.addEventListener('click', () => {
        weui.picker([{
            label: '女',
            value: 0
        }, {
            label: '男',
            value: 1
        }], {
            onConfirm: function (result) {
                console.log(result);
                selSex.textContent = result[0].label;
            },
            title: '性别选择器'
        });
    })


    // 获取生日标签

    // 监听
    // 监听下拉点击
    showDatePicker.addEventListener('click', () => {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                console.log(result);
                selBirthday.textContent = result.map(v => String(v.value).padStart(2, '0')).join('-');
            },
            title: '生日选择器'
        });
    })

    // 获取省份标签

    // 储存省份
    let province = [];
    // 获取所以省份
    function provinces() {
        request.get('api/shared/province').then(res => {
            // 数据解构
            let { errno, data } = res.data;
            // 判断
            if (errno === 0) {
                province = data.map(function (v) {
                    return {
                        label: v.name,
                        value: v.id,
                    };
                })
            }

        })
    }
    provinces()
    // 监听省份
    showProvincePicker.addEventListener('click', () => {
        weui.picker(province, {
            onConfirm: function (result) {
                console.log(result);
                selProvince.textContent = result[0].label;
                provinceId1=result[0].value;
                // 获取城市
                getCity(result[0].value);
                // console.log(getCity(result[0].value));
            },
            title: '省份选择器'
        });
    })


    // 获取城市
    let oldNeed=null;//用于储存上一次的处理函数
    // const citys=[];
    // 渲染城市
    function getCity(provinceId) {
        request.get('/api/shared/city', {
            params: {
                provinceId,
            },
        }).then(res => {
            console.log(res.data);
            // 解构数据
            let { errno, data } = res.data;
            // // 判断
            if (errno === 0) {
                // 处理数据
                let citys = data.map(v => ({ label: v.name, value: v.id }))
                // console.log(citys);
                // 设置一个容器储存函数体
                function need(){
                    weui.picker(citys, {
                        onConfirm: function (result) {
                            console.log('aa',result);
                            selCity.textContent = result[0].label;
                            cityId=result[0].value;
                        },
                        title: '城市选择器'
                    });
                }
                // 删除旧事件
                showCityPicker.removeEventListener('click',oldNeed)
                // 储存新事件
                oldNeed=need;
                // 获取数据后，再绑定选择器 渲染内容
                showCityPicker.addEventListener('click', need)
            }

        })

    }

    // 文本域监听
    text.addEventListener('input', () => {
        textLength.textContent = text.value.length;
    })


    // 提交表单
    submit.addEventListener('click', () => {
        request.post('/api/user/changeInfo', {
            nickName:nickName.value,
            gender:selSex.textContent,
            provinceId:provinceId1,
            cityId:cityId,
            birthday:selBirthday.textContent,
            imgUrl:avatar.src.replace(API,''),
            sign:text.value,

        }).then(res=>{
            // 解构
                let {errno,data}=res.data;
            // 判断
            if(errno===0){
                // 更新token
                localStorage.setItem('token','Bearer '+data.token)
            }
        })
    })
};
